import styles from "./index.module.scss";
import { useDispatch, useSelector } from "react-redux";
import closeBtn from "@/assets/public/close-btn.png";
import closeBtnLight from "@/assets/public/close-btn-light.png";
import { setLayers } from "@/store";
import EchartsEL from "./echartsEL";

export default function Model(props) {
  const dispatch = useDispatch();
  const { name } = props;
  const theme = useSelector((state) => state.theme);
  const seriesData = [
    {
      name: "网规网优",
      num1: 100,
      num2: 100,
    },
    {
      name: "无限工程",
      num1: 150,
      num2: 50,
    },
    {
      name: "ICT",
      num1: 120,
      num2: 70,
    },
    {
      name: "IT",
      num1: 120,
      num2: 70,
    },
  ];
  const legendArr = ["需求", "供应"];
  const colorArr = [
    [
      "rgba(0, 147, 221, 1)",
      "rgba(0, 88, 255, 0.20)",
      "rgba(0, 114, 221, 1)",
      "rgba(255, 255, 255, 1)",
      "rgba(10, 49, 108, 0.60)",
      "rgba(27, 101, 155, 0.60)",
    ],
    [
      "rgba(0, 221, 88, 1)",
      "rgba(0, 255, 87, 0.20)",
      "rgba(0, 126, 51, 1)",
      "rgba(255, 255, 255, 1)",
      "rgba(10, 108, 37, 0.60)",
      "rgba(27, 155, 55, 0.60)",
    ],
  ];
  const handleClose = () => {
    dispatch(
      setLayers({
        query: {},
        name: "",
        other: {},
      })
    );
  };

  const getValue = (value) => {
    console.log(value);
  };

  return (
    <div className={styles.model}>
      <header className={styles.header}>
        {theme ? (
          <img
            style={{
              width: "20px",
              height: "22px",
            }}
            onClick={handleClose}
            src={closeBtnLight}
            alt="加载中..."
          />
        ) : (
          <img
            style={{
              width: "20px",
              height: "22px",
            }}
            onClick={handleClose}
            src={closeBtn}
            alt="加载中..."
          />
        )}
        <span className={styles.title}>{name}</span>
      </header>
      <div className={styles.chartBox}>
        <EchartsEL
          colorArr={colorArr}
          seriesData={seriesData}
          legendArr={legendArr}
          textColor={!theme ? "#fff" : "rgba(37, 76, 112, 1)"}
        ></EchartsEL>
      </div>
    </div>
  );
}
